﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="KPICurrentAdmin.aspx.cs" Inherits="FBKPI.Pages.KPICurrentAdmin" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {

            $("#divBrowseRGMType").hide();
            $("#divBrowseRGMType").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });

            $("#divBrowseRGM").hide();
            $("#divBrowseRGM").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });

            $("#divBrowseLocation").hide();
            $("#divBrowseLocation").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });

            $("#divBrowseSubBranch").hide();
            $("#divBrowseSubBranch").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });

            $("#divBrowseDepartment").hide();
            $("#divBrowseDepartment").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });

            $("#divBrowseSection").hide();
            $("#divBrowseSection").dialog({ autoOpen: false, width: 900, height: 500, modal: true, resizable: false });

            $("#ClearRgmType").click(function () {
                $("#<%=txt_rgmtype.ClientID %>").val('');
                $("#<%=txt_rgmtypeid.ClientID %>").val('');
            });

            $("#ClearRgm").click(function () {
                $("#<%=txt_rgm.ClientID %>").val('');
                $("#<%=txt_rgmid.ClientID %>").val('');
            });

            $("#ClearBranch").click(function () {
                $("#<%=txt_location.ClientID %>").val('');
                $("#<%=txt_locationid.ClientID %>").val('');
            });

            $("#ClearSubBranch").click(function () {
                $("#<%=txt_subbranch.ClientID %>").val('');
                $("#<%=txt_subbranchid.ClientID %>").val('');
            });

            $("#ClearSection").click(function () {
                $("#<%=txt_section.ClientID %>").val('');
                $("#<%=txt_sectionid.ClientID %>").val('');
            });

            $("#ClearDepartment").click(function () {
                $("#<%=txt_department.ClientID %>").val('');
                $("#<%=txt_departmentid.ClientID %>").val('');
            });


            //browse section
            $("#btn_BrowseSection").click(function () {
                $("#divBrowseSection").dialog("option", "title", '<span class="header-text">Select Section</span>');
                $("#divBrowseSection").dialog("open");
                $('#section').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/SectionByDepartmentSerializer.ashx?&DepartmentID=" + $("#<%=txt_departmentid.ClientID %>").val(),
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickSection('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] }
                    ]
                });

                //mark selected row
                $('body').on("click", '#section tbody tr', function () {
                    $('#section tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickSection = function (SectionID, SectionDescription) {
                $("#<%=txt_section.ClientID %>").val(SectionDescription);
                $("#<%=txt_sectionid.ClientID %>").val(SectionID);
                $("#<%=txt_sectiondesc.ClientID %>").val(SectionDescription);
                $("#divBrowseSection").dialog("close");
                $("#btn_BrowseSubSection").attr("disabled", false);
            }

            //browse department
            $("#btn_BrowseDepartment").click(function () {
                $("#divBrowseDepartment").dialog("option", "title", '<span class="header-text">Select Department</span>');
                $("#divBrowseDepartment").dialog("open");
                $('#department').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/DepartmentSerializer.ashx?CurrUser=" + $("#txt_user").val(),
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickDepartment('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] }
                    ]
                });

                //mark selected row
                $('body').on("click", '#department tbody tr', function () {
                    $('#department tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickDepartment = function (DepartmentID, DepartmentDescription) {
                $("#<%=txt_department.ClientID %>").val(DepartmentDescription);
                $("#<%=txt_departmentid.ClientID %>").val(DepartmentID);
                $("#<%=txt_departmentdesc.ClientID %>").val(DepartmentDescription);
                $("#divBrowseDepartment").dialog("close");
                $("#btn_BrowseSection").attr("disabled", false);
            }
            //end browse department


            //browse subbranch
            $("#btn_BrowseSubBranch").click(function () {
                $("#divBrowseSubBranch").dialog("option", "title", '<span class="header-text">Select Sub Branch</span>');
                $("#divBrowseSubBranch").dialog("open");
                $('#subbranch').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/SubBranchSerializer.ashx?CurrUser=" + $("#txt_user").val() + "&BranchID=" + $("#<%=txt_locationid.ClientID %>").val(),
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Code" },
                        { "mData": "OrgID" },
                        { "mData": "Description" },
                        { "mData": "Branch" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickSubBranch('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [6]
                        },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [5]
                        },
                        { "sClass": "center", "aTargets": [0, 1, 2, 4, 5, 6] }
                    ]
                });

                //mark selected row
                $('body').on("click", '#subbranch tbody tr', function () {
                    $('#subbranch tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickSubBranch = function (SubBranchID, SubBranchDescription) {
                $("#<%=txt_subbranch.ClientID %>").val(SubBranchDescription);
                $("#<%=txt_subbranchid.ClientID %>").val(SubBranchID);
                $("#<%=txt_subbranchdesc.ClientID %>").val(SubBranchDescription);
                $("#divBrowseSubBranch").dialog("close");
            }
            //end browse location



            $("#btn_BrowseLocation").click(function () {

                $("#divBrowseLocation").dialog("option", "title", '<span class="header-text">Select Branch</span>');
                $("#divBrowseLocation").dialog("open");
                $('#location').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/LocationSerializer.ashx?CurrUser=" + $("#txt_user").val() + "&RgmID=" + $("#<%=txt_rgmid.ClientID %>").val(),
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "ORGID" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickLocation('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [4]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3, 4] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [3]
                        }
                    ]
                });

                //mark selected row
                $('body').on("click", '#location tbody tr', function () {
                    $('#location tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickLocation = function (LocationID, LocationDescription) {
                $("#<%=txt_location.ClientID %>").val(LocationDescription);
                $("#<%=txt_locationid.ClientID %>").val(LocationID);
                $("#<%=txt_locationdesc.ClientID %>").val(LocationDescription);
                $("#divBrowseLocation").dialog("close");

                $("#<%=txt_subbranch.ClientID %>").val('');
                $("#<%=txt_subbranchid.ClientID %>").val('');
            }

            $("#btn_BrowseBusinessGroup").click(function () {
                $("#divBrowseBusinessGroup").dialog("option", "title", '<span class="header-text">Select Business Group</span>');
                $("#divBrowseBusinessGroup").dialog("open");
                $('#businessgroup').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/BusinessGroupSerializer.ashx?CurrUser=" + $("#txt_user").val(),
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickBusinessGroup('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                });

                //mark selected row
                $('body').on("click", '#businessgroup tbody tr', function () {
                    $('#businessgroup tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickBusinessGroup = function (BusinessGroupID, BusinessGroupDescription) {
                $("#txt_businessgroup").val(BusinessGroupDescription);
                $("#txt_businessgroupid").val(BusinessGroupID);
                $("#divBrowseBusinessGroup").dialog("close");
            }

            $("#btn_BrowseRGM").click(function () {
                $("#divBrowseRGM").dialog("option", "title", '<span class="header-text">Select RGM</span>');
                $("#divBrowseRGM").dialog("open");
                $('#rgm').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": true,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/RGMSerializer.ashx?CurrUser=" + $("#txt_user").val() + "&RgmTypeID=" + $("#<%=txt_rgmtypeid.ClientID %>").val(),
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickRGM('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                });

                //mark selected row
                $('body').on("click", '#rgm tbody tr', function () {
                    $('#rgm tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickRGM = function (RGMID, RGMDescription) {
                $("#<%=txt_rgm.ClientID %>").val(RGMDescription);
                $("#<%=txt_rgmid.ClientID %>").val(RGMID);
                $("#<%=txt_rgmdesc.ClientID %>").val(RGMDescription);
                $("#divBrowseRGM").dialog("close");

                $("#<%=txt_location.ClientID %>").val('');
                $("#<%=txt_locationid.ClientID %>").val('');

                $("#<%=txt_subbranch.ClientID %>").val('');
                $("#<%=txt_subbranchid.ClientID %>").val('');
            }


            $("#btn_BrowseRGMType").click(function () {
                $("#divBrowseRGMType").dialog("option", "title", '<span class="header-text">Select RGM Type</span>');
                $("#divBrowseRGMType").dialog("open");
                $('#rgmtype').dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                        "sSearch": "Search"
                    },
                    "bSort": false,
                    "bPaginate": true,
                    "bAutoWidth": true,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/RGMTypeSerializer.ashx?CurrUser=" + $("#txt_user").val(),
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "aoColumns": [
                        { "mData": "No" },
                        { "mData": "Description" },
                        { "mData": "isActive" },
                        { "mData": "ID" }
                    ],
                    "aoColumnDefs":
                    [
                        { "fnRender":
                            function (oObj) {
                                return "<a href=\"#\" onclick=\"PickRGMType('" + oObj.aData["ID"] + "','" + oObj.aData["Description"] + "')\"><img src='../images/ok.png' /></a>";
                            },
                            "aTargets": [3]
                        },
                        { "sClass": "center", "aTargets": [0, 2, 3] },
                        { "fnRender":
                            function (oObj) {
                                if (oObj.aData["isActive"] == 'True') {
                                    return "<img src='../images/check.png' />"
                                }
                                else {
                                    return "<img src='../images/cross.png' />"
                                }
                            },
                            "aTargets": [2]
                        }
                    ]
                });

                //mark selected row
                $('body').on("click", '#rgmtype tbody tr', function () {
                    $('#rgmtype tbody tr').removeClass("row_selected");
                    $(this).addClass("row_selected");
                });
                $(".dataTables_filter input").focus();
                return false;
            });

            PickRGMType = function (RGMTypeID, RGMTypeDescription) {
                $("#<%=txt_rgmtype.ClientID %>").val(RGMTypeDescription);
                $("#<%=txt_rgmtypeid.ClientID %>").val(RGMTypeID);
                $("#<%=txt_rgmtypedesc.ClientID %>").val(RGMTypeDescription);

                $("#divBrowseRGMType").dialog("close");

                $("#<%=txt_location.ClientID %>").val('');
                $("#<%=txt_locationid.ClientID %>").val('');

                $("#<%=txt_subbranch.ClientID %>").val('');
                $("#<%=txt_subbranchid.ClientID %>").val('');

                $("#<%=txt_rgm.ClientID %>").val('');
                $("#<%=txt_rgmid.ClientID %>").val('');
            }
        });
    </script>
    <script type="text/javascript">
    var oTable;
    var oFC;
    $(document).ready(function () {

         $("#<%=btn_find.ClientID %>").click(function () {
////             //alert("D");
////             //alert($("#<%=txt_departmentdesc.ClientID %>").val());
////            //$("#<%=txt_rgmtype.ClientID %>").val($("#<%=txt_rgmtypedesc.ClientID %>").val()); 
////            //$("#<%=txt_rgm.ClientID %>").val($("#<%=txt_rgmdesc.ClientID %>").val()); 
////            //$("#<%=txt_location.ClientID %>").val($("#<%=txt_locationdesc.ClientID %>").val()); 
////            //$("#<%=txt_subbranch.ClientID %>").val($("#<%=txt_subbranchdesc.ClientID %>").val()); 

////            var a = $("#<%=txt_departmentid.ClientID %>").val();
////            alert(a);
////            //$("#<%=txt_department.ClientID %>").val(a); 
////            //$("#<%=txt_section.ClientID %>").val($("#<%=txt_sectiondesc.ClientID %>").val()); //



            });
       
        var RgmTypeID = $("#<%=txt_rgmtypeid.ClientID %>").val();
        var RgmID = $("#<%=txt_rgmid.ClientID %>").val();
        var BranchID = $("#<%=txt_locationid.ClientID %>").val();
        var SubBranchID = $("#<%=txt_subbranchid.ClientID %>").val();

        var DepartmentID = $("#<%=txt_departmentid.ClientID %>").val();
        var SectionID = $("#<%=txt_sectionid.ClientID %>").val();

        if(RgmTypeID=="")
            RgmTypeID=0;

        if(RgmID=="")
            RgmID=0;

        if(BranchID=="")
            BranchID=0;

        if(SubBranchID=="")
            SubBranchID=0;

        if(DepartmentID=="")
            DepartmentID=0;

        if(SectionID=="")
            SectionID=0;



        mainmenu("#nav ul", "#nav li");
        mainmenu("#menu_wrap ul", "#menu_wrap li");

        $("#movement").hide();

        $("#EmployeeTable").dataTable({
            "oLanguage": {
                "sZeroRecords": "No records to display",
                 "sSearch": "Search"
            },
            "bSort": true,
            "bPaginate": true,
            "bAutoWidth": false,
            "bDestroy": true,
            "bProcessing": true,
            "bServerSide": true,
            "bJQueryUI": true,
             "sPaginationType": "full_numbers",
             "bDeferRender": true,
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": "../Serializer/EmployeeBySuperiorIDAdminSerializer.ashx?User=" + $("#txt_user").val()+"&RgmTypeID="+RgmTypeID+"&RgmID="+RgmID+"&BranchID="+BranchID+"&SubBranchID="+SubBranchID+"&DepartmentID="+DepartmentID+"&SectionID="+SectionID,
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "aoColumns": [
             {
                "mData": "ID", "sWidth": "5%"
            },{
                "mData": "No", "sWidth": "3%"
            }, {
                "mData": "EmployeeName"
            }, {
                "mData": "SubBranch"
            }, {
                "mData": "Department"
            }, {
                "mData": "Section"
            }, {
                "mData": "SubSection"
            }, {
                "mData": "JobPosition"
            }, {
                "mData": "JobTitle"
            }, {
                "mData": "isActive", "sWidth": "5%"
            }],
            "aoColumnDefs": [{
                "fnRender": function (oObj) {
                    if (oObj.aData["isActive"] == 'True') {
                        return "<img src='../images/check.png' />"
                    } else {
                        return "<img src='../images/cross.png' />"
                    }
                },
                "aTargets": [9]
            }, {
                "fnRender": function (oObj) {
                    return "<a  onclick=\"DrawKPITable('" + oObj.aData["ID"] + "')\"><img src='../images/detail.png' /></a>";
                },
                "aTargets": [0]
            },
             {
                "fnRender": function (oObj) {
                    return "<a  onclick=\"DrawKPITable('" + oObj.aData["ID2"] + "')\">"+oObj.aData["EmployeeName"]+"</a>";
                },
                "aTargets": [2]
            },

            {
                 "bVisible": false,
                 "aTargets": [5,6,8]
             },
             {
                "sClass": "center",
                "aTargets": [0,1, 8, 9]
            }]
        });

         //mark selected row
        $('body').on("click", '#EmployeeTable tbody tr', function () {
            $('#EmployeeTable tbody tr').removeClass("row_selected");
            $(this).addClass("row_selected");
        });

        


        oTable = $("#dashboardtable").dataTable({
            "oLanguage": {
                "sZeroRecords": "No records to display",
                 "sSearch": "Search"
            },
            //"sScrollY": "100%",
            "sScrollX": "100%",
		    "sScrollXInner": "150%",
		    "bScrollCollapse": false,
            "bSort": true,
            "bDestroy": true,
            "bPaginate": true,
            "bAutoWidth": false,
            "bProcessing": true,
            "bServerSide": true,
            "bJQueryUI": true,
             "sPaginationType": "full_numbers",
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": "../Serializer/DashboardSerializer.ashx?User=" + $("#txt_user").val(),
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "aoColumns": [
            
            {
                "mData": "KPIAssignID2"
            },

            {
                "mData": "No"
            },
            
             {
                "mData": "Description"
            }, {
                "mData": "Weight"
            }, 
            
            {
                "mData": "Format"
            },
            
            {
            "mData": "UoMMax"
            },
            {
            "mData": "UoMMin"
            },
            
             {
                "mData": "Jan"
            }, {
                "mData": "Feb"
            }, {
                "mData": "Mar"
            }, {
                "mData": "Apr"
            }, {
                "mData": "May"
            }, {
                "mData": "Jun"
            }, {
                "mData": "Jul"
            }, {
                "mData": "Aug"
            }, {
                "mData": "Sep"
            }, {
                "mData": "Oct"
            }, {
                "mData": "Nov"
            }, {
                "mData": "Dec"
            }, {
                "mData": "Total"
            }, {
                "mData": "ScoreAchieved"
            }, {
                "mData": "KPIAssignID",
                "bVisible":false,
            }],
            "aoColumnDefs": [
            
            {
                "fnRender": function (oObj) {
                    return "<a onclick=\"GraphicRender('" + oObj.aData["KPIAssignID"] + "', '" + oObj.aData["Description"] + "', '" + $("#txt_user").val() + "')\">" + oObj.aData["Description"] + "</a>";
                },
                "aTargets": [2]
            }, 

            {
                "fnRender": function (oObj) {
                    return "<a onclick=\"GraphicRender('" + oObj.aData["KPIAssignID"] + "', '" + oObj.aData["Description"] + "', '" + $("#txt_user").val() + "')\">" + "<img src='../images/detail.png' />" + "</a>";
                },
                "aTargets": [0]
            },
            
             {
                 "bVisible": false,
                 "aTargets": [0]
             },

            {
                "sClass": "center",
                "aTargets": [0,1,3,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
            }]
        });

                //mark selected row
        $('body').on("click", '#dashboardtable tbody tr', function () {
            $('#dashboardtable tbody tr').removeClass("row_selected");
            $(this).addClass("row_selected");
        });
        //--------------------end of mark selected row-----------------------------

        GetName($("#txt_user").val());

        DrawKPITable = function(EmployeeID)
        {
            oTable = $("#dashboardtable").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                     "sSearch": "Search"
                },
                //"sScrollY": "100%",
                "sScrollX": "100%",
		        "sScrollXInner": "150%",
		        "bScrollCollapse": false,
                "bSort": true,
                "bDestroy": true,
                "bPaginate": true,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bJQueryUI": true,
                 "sPaginationType": "full_numbers",
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/DashboardSerializer.ashx?User=" + EmployeeID,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "aoColumns": [
                
                {
                "mData": "KPIAssignID2"
            },
                {
                    "mData": "No"
                }, {
                    "mData": "Description"
                }, {
                    "mData": "Weight"
                },
                
                 {
                    "mData": "Format"
                },

                {
                "mData": "UoMMax"
                },
                {
                "mData": "UoMMin"
                },
                
                 {
                    "mData": "Jan"
                }, {
                    "mData": "Feb"
                }, {
                    "mData": "Mar"
                }, {
                    "mData": "Apr"
                }, {
                    "mData": "May"
                }, {
                    "mData": "Jun"
                }, {
                    "mData": "Jul"
                }, {
                    "mData": "Aug"
                }, {
                    "mData": "Sep"
                }, {
                    "mData": "Oct"
                }, {
                    "mData": "Nov"
                }, {
                    "mData": "Dec"
                }, {
                    "mData": "Total"
                }, {
                    "mData": "ScoreAchieved"
                }, 
                
                {
                    "mData": "KPIAssignID",
                    "bVisible":false,
                }],
                "aoColumnDefs": [
                
                {
                    "fnRender": function (oObj) {
                        return "<a  onclick=\"GraphicRender('" + oObj.aData["KPIAssignID"] + "', '" + oObj.aData["Description"] + "','" + EmployeeID + "')\">" + oObj.aData["Description"] + "</a>";
                    },
                    "aTargets": [2]
                },
                
                 {
                "fnRender": function (oObj) {
                    return "<a onclick=\"GraphicRender('" + oObj.aData["KPIAssignID"] + "', '" + oObj.aData["Description"] + "', '" + $("#txt_user").val() + "')\">" + "<img src='../images/detail.png' />" + "</a>";
                },
                "aTargets": [0]
            },
             

              {
                 "bVisible": false,
                 "aTargets": [0]
             },   
                {
                    "sClass": "center",
                    "aTargets": [0,1,3,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
                }]
            });
        
            //mark selected row
            $('body').on("click", '#dashboardtable tbody tr', function () {
                $('#dashboardtable tbody tr').removeClass("row_selected");
                $(this).addClass("row_selected");
            });
            //--------------------end of mark selected row-----------------------------

            GetName(EmployeeID);
        }
    });


    function GraphicRender(KPIAssignID, Title, EmployeeID) {
        $.ajax({
            "dataType": 'json',
            "type": "GET",
            "url": "../Serializer/DashboardRealizationSerializer.ashx?User=" + EmployeeID + "&KPIAssign=" + KPIAssignID,
            "success": function (data) {
                $("#movement").show();

                $("#chartdiv").html('');

                var lineScore = ArrGraphSeries(data, 'Score');
                var lineMax = ArrGraphSeries(data, 'Max');
                var lineMin = ArrGraphSeries(data, 'Min');

                var plot1 = $.jqplot('chartdiv', [lineScore, lineMax, lineMin], {
                    title: Title,
                    axes: {
                        xaxis: {
                            renderer: $.jqplot.DateAxisRenderer,
                            tickOptions: {
                                formatString: '%b'
                            }
                        },
                        yaxis: {
                            tickOptions: {
                                formatString: '%.2f'
                            },
                            min: 0,
                            max: (200)
                        }
                    },
                    legend: {
                        show: true
                    },
                    series: [{
                        label: 'Score'
                    }, {
                        label: 'Max'
                    }, {
                        label: 'Min'
                    }],
                    highlighter: {
                        show: true,
                        sizeAdjust: 10
                    },
                    cursor: {
                        show: false
                    }
                });
            },
            "error": function(){
                $("#movement").hide();
                return false;
            }
        });
    }

    function ArrGraphSeries(data, mode) {
        var retVal = [];

        if (mode == 'Score') {
            for (i = 0; i < data.result.length; i++) {
                var x = [data.result[i].Dates.toString(), data.result[i].Score.toString()];
                retVal.push(x);
            }
        } else if (mode == 'Max') {
            for (i = 0; i < data.result.length; i++) {
                var x = [data.result[i].Dates.toString(), data.result[i].Max.toString()];
                retVal.push(x);
            }
        } else if (mode == 'Min') {
            for (i = 0; i < data.result.length; i++) {
                var x = [data.result[i].Dates.toString(), data.result[i].Min.toString()];
                retVal.push(x);
            }
        }

        return retVal;
    }

    GetName = function (EmployeeID) {
        $.ajax({
            "url": "../Serializer/DashboardSerializer.ashx?User=" + EmployeeID,
            success: function (data) {
                $("#lbl_employeename").text(': ' + data.EmployeeName);
                 $("#lblTotalWeight").text(data.TotalWeight);
                $("#lblTotalScore").text(data.TotalScore);
            }
        });
    }
    </script>
    <%--<style>
        .fg-toolbar
        {
            display: none;
        }
    </style>--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        <table border="0">
            <tr>
                <td>
                    <table>
                        <tr>
                            <td style="width: 100px;">
                                RGM Type
                            </td>
                            <td style="width: 10px;">
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_rgmtype" runat="server" Width="200px" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                <button id="btn_BrowseRGMType" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <a href="#" id="ClearRgmType">remove</a>
                                <input type="hidden" id="txt_rgmtypeid" runat="server" />
                                <input type="hidden" id="txt_rgmtypedesc" runat="server" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td style="padding-left: 20px;">
                    <table>
                        <tr>
                            <td style="width: 100px;">
                                Department
                            </td>
                            <td style="width: 10px;">
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_department" runat="server" Width="300px" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                <button id="btn_BrowseDepartment" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <a href="#" id="ClearDepartment">remove</a>
                                <input type="hidden" id="txt_departmentid" runat="server" />
                                <input type="hidden" id="txt_departmentdesc" runat="server" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td style="width: 100px;">
                                RGM
                            </td>
                            <td style="width: 10px;">
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_rgm" runat="server" Width="200px" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                <button id="btn_BrowseRGM" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <a href="#" id="ClearRgm">remove</a>
                                <input type="hidden" id="txt_rgmid" runat="server" />
                                <input type="hidden" id="txt_rgmdesc" runat="server" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td style="padding-left: 20px;">
                    <table>
                        <tr>
                            <td style="width: 100px;">
                                Section
                            </td>
                            <td style="width: 10px;">
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_section" runat="server" Width="300px" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                <button id="btn_BrowseSection" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <a href="#" id="ClearSection">remove</a>
                                <input type="hidden" id="txt_sectionid" runat="server" />
                                <input type="hidden" id="txt_sectiondesc" runat="server" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td style="width: 100px;">
                                Branch
                            </td>
                            <td style="width: 10px;">
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_location" runat="server" Width="200px" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                <button id="btn_BrowseLocation" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <a href="#" id="ClearBranch">remove</a>
                                <input type="hidden" id="txt_locationid" runat="server" />
                                <input type="hidden" id="txt_locationdesc" runat="server" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td style="width: 100px;">
                                Sub Branch
                            </td>
                            <td style="width: 10px;">
                                :
                            </td>
                            <td>
                                <asp:TextBox ID="txt_subbranch" runat="server" Width="200px" ReadOnly="true" class="longText mandatory"></asp:TextBox>
                                <button id="btn_BrowseSubBranch" class="ui-button ui-state-default">
                                    <span class="ui-button ui-icon ui-icon-newwin"></span>
                                </button>
                                <a href="#" id="ClearSubBranch">remove</a>
                                <input type="hidden" id="txt_subbranchid" runat="server" />
                                <input type="hidden" id="txt_subbranchdesc" runat="server" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <%--<button id="btn_find" class="button search" name="btn_find">
                        Proses
                    </button>--%>
                    <button id="btn_find" class="button star" runat="server" name="btn_find">
                        Proses
                    </button>
                </td>
            </tr>
        </table>
    </div>
    <br />
    <div>
        <%-- <form id="dashboard">--%>
        <%-- <div style="width: 100%">--%>
        <div class="customPageTitle">
            Employee List</div>
        <br />
        <%-- <div class="customePageContent">--%>
        <%-- <div style="border: 1px solid Black;">--%>
        <div class="ui-widget-content">
            <table cellpadding="0" cellspacing="0" class="display" id="EmployeeTable">
                <thead>
                    <tr>
                        <th>
                        </th>
                        <th>
                            No
                        </th>
                        <th>
                            Employee Name
                        </th>
                        <th>
                            Sub Branch
                        </th>
                        <th>
                            Department
                        </th>
                        <th>
                            Section
                        </th>
                        <th>
                            Sub Section
                        </th>
                        <th>
                            Job Position
                        </th>
                        <th>
                            Job Title
                        </th>
                        <th>
                            is Active
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <%-- </div>--%>
        <br />
        <div class="customPageTitle">
            Current KPI Status&nbsp;<label id="lbl_employeename"></label></div>
        <br />
        <div class="customePageContent">
            <div style="border: 1px solid Black;">
                <table cellpadding="0 !important" cellspacing="0 !important" class="display" id="dashboardtable">
                    <thead>
                        <tr>
                            <th>
                            </th>
                            <th>
                                No
                            </th>
                            <th>
                                KPI
                            </th>
                            <th>
                                Weight
                            </th>
                            <th>
                                Format
                            </th>
                            <th>
                                UoM Max.
                            </th>
                            <th>
                                UoM Min.
                            </th>
                            <th>
                                Jan
                            </th>
                            <th>
                                Feb
                            </th>
                            <th>
                                Mar
                            </th>
                            <th>
                                Apr
                            </th>
                            <th>
                                May
                            </th>
                            <th>
                                Jun
                            </th>
                            <th>
                                Jul
                            </th>
                            <th>
                                Aug
                            </th>
                            <th>
                                Sep
                            </th>
                            <th>
                                Oct
                            </th>
                            <th>
                                Nov
                            </th>
                            <th>
                                Dec
                            </th>
                            <th>
                                Total
                            </th>
                            <th>
                                Score
                            </th>
                            <th>
                                KPIAssignID
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <br />
        <b>Total Weight :&nbsp;&nbsp;
            <label id="lblTotalWeight">
            </label>
        </b>
        <br />
        <b>Total Score &nbsp; :&nbsp;&nbsp;
            <label id="lblTotalScore">
            </label>
        </b>
        <br />
        <%--<div id="movement">
                <div class="customPageTitle">
                    Current KPI Score Movement</div>
                <br />
                <div id="chartdiv" style="height: 400px; width: 1000px;">
                </div>
            </div>--%>
    </div>
    <%--</form>--%>
    <%--</div>--%>
    <div id="divBrowseDepartment" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="department">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="divBrowseRGMType" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="rgmtype">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="divBrowseRGM" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="rgm">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="divBrowseLocation" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="location">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        ORG ID
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="divBrowseSubBranch" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="subbranch">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Code
                    </th>
                    <th>
                        ORG ID
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        Branch
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="divBrowseSection" class="ui-widget-content padding5px ui-corner-all">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="section">
            <thead>
                <tr>
                    <th>
                        No
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        is Active
                    </th>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</asp:Content>
